<template>
  <div>
    <h1>Header ****{{getcount}}</h1>
    <button @click="addCount">累加</button>
    <button @click="addNCount(3)">累加N</button>
    <button @click="addWait">等等再加</button>
    <button @click="addNWait({n:1})">等等再加n</button>

    <h2>~~~{{getPrice}}</h2>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    name:'Header',
    mounted() {
        console.log(this)
    },
    computed:{
        // getcount(){
        //     return this.$store.state.count
        // },
        // getPrice(){
        //     return this.$store.state.price
        // }

        ...mapState('count',{getcount:'count',getPrice:'price'})
    },
    methods:{
        addCount(){
            // 对mutation上的事件进行提交，$store.commit
            this.$store.commit('count/increment')
        },
        // 提交，并传递参数 --对象， 解构出来
        addNCount(n){
            this.$store.commit('count/incrementN',{n})
        },
        addWait(){
            // 要分发action,使用$store.dispatch方法
            this.$store.dispatch('count/incrementWait')
        },
        addNWait(n){
            this.$store.dispatch('count/incrementNWait',n)
        }
    }
}
</script>

<style>

</style>